<template>
    <div class="relative">
        <h1 class="title">修改密码</h1>
        <div class="box">
            <div class="input-box">
                <p class="label fl">账号</p>
                <input class="input" v-model="username" placeholder="请输入账号">
            </div>
            <div class="input-box">
                <p class="label fl">密码</p>
                <input class="input" v-model="password" type="password" placeholder="请输入密码">
            </div>

            <button class="button" @click="login">登陆</button>
        </div>
    </div>
</template>

<script>
  export default {
    name: "resetPassword",
    data() {
      return {
        username: '',
        password: ''
      }
    }, methods: {
      login: function () {
        const that = this
        this.$loginApi.post('/oauth/mobile/token', {
          "client": 3,
          "mobile": this.username,
          "password": this.password,
          "deviceMark": this.$machineId,
          "version": "2.0.7",
          "network": "",
          "deviceModel": this.$machineName
        }).then(function (data) {
          console.log(data)
          that.$http.defaults.headers.common['Authorization'] = 'Bearer ' + data.data.access_token;
          localStorage.setItem('ddbes-token', data.data.access_token)
          localStorage.setItem('current_user', that.username)
          that.getUserInfo(that.username)
          that.$message({
            type:'success',
            message:'登录成功'
          })
          that.$router.push({
            path: '/cloudSpace/detail/1',
            meta: {currentTime: new Date().getTime()}
          })

        })
      },
      getUserInfo: function (userName) {
        const that = this
        this.$http.get('/user/user/info').then(function (data) {
          if (data.data.code === 1) {
            localStorage.setItem(userName + '_info', JSON.stringify(data.data.data))
            that.$store.commit('setUserInfo', data.data.data)
          }
        })
      },
    }
  }
</script>

<style scoped>
    .box {
        position: absolute;
        left: 0;
        right: 0;
        top: calc((100vh - 400px) / 2);
        height: 260px;
        width: 400px;
        margin: auto;
    }

    .button {
        background: #0c33f0;
        border: none;
        width: 82px;
        height: 26px;
        color: white;
        font-size: 14px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .input-box {
        width: 400px;
        margin: 10px 0;
    }

    .input-box .label {
        height: 38px;
        line-height: 38px;
        width: 95px;
        text-align: right;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .input-box .input {
        height: 38px;
        width: 305px;
        font-size: 14px;
        border: solid #ededef 2px;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .input-box .input::placeholder {
        color: #8a8b90;
        font-size: 14px;
    }

    .input-box .prompt {
        color: #3353ce;
        font-weight: bold;
        padding-left: 95px;
        font-size: 12px;
        line-height: 25px;
        height: 25px;
    }
</style>
